<template>
	<view class="search">
		<image
			class="background"
			mode="widthFix"
			:src="require('@/assets/images/backgroundWx.png')"
		/>
		<view class="coupon-num"
			>共有
			<block v-for="(item, index) in couponTotal" :key="index"
				><view class="coupon-num__item">{{ item }}</view></block
			>
			张京东隐藏券</view
		>
		<view class="coupon" @tap="$Router.push('/pages/jd/search')">
			<image
				class="coupon-inout"
				:src="require('@/pages/special/static/images/search/inputWx.png')"
			></image>
			<!-- 轮播 -->
			<view class="coupon-swiper">
				<swiper
					class="swiper"
					autoplay="true"
					vertical="true"
					interval="3000"
					duration="500"
				>
					<template v-if="shareTemplate.length > 0">
						<swiper-item v-for="(item, index) in shareTemplate" :key="index">
							<view class="swiper-item">{{ item }}</view>
						</swiper-item>
					</template>
					<swiper-item v-else>
						<view class="swiper-item">复制京东商品标题/链接</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="coupon-btn">搜券</view>
		</view>

		<!--省钱教程-->
		<view class="course">
			<view class="left">
				<view class="left-item"
					><text class="num">1</text><text>复制京东商品标题/链接</text></view
				>
				<view class="left-item"> <text class="num">2</text><text>搜券</text></view>
				<view class="left-item"><text class="num">3</text><text>领现金补贴</text></view>
			</view>
			<view class="course-btn" @tap="$Router.push('/pages/special/course')">
				<text>教程</text>
				<text class="iconfont">&#xe77c;</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Search',
	data() {
		return {
			shareTemplate: []
		};
	},
	computed: {
		couponTotal() {
			let num = 19093275 - Math.floor(Math.random() * (20000 - 10000 + 1) + 10000);
			let arr = String(num).split('');
			return arr;
		}
	},
	mounted() {
		// this.getShareTemplate();
	},
	methods: {
		getShareTemplate() {
			this.$service.shopping.shareTemplate
				.list({
					type: '100',
					shoptype: '2'
				})
				.then(res => {
					this.shareTemplate = res;
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.search {
	text-align: center;
	height: 335rpx;
	@include flexBox(space-around, center, column);
	.background {
		position: absolute;
		width: 100%;
		z-index: 1;
	}
	.coupon-num {
		color: #ffffff;
		font-size: 22rpx;
		text-align: center;
		z-index: 2;
		margin-top: 100rpx;
		display: flex;
		align-items: center;

		&__item {
			width: 22rpx;
			height: 28rpx;
			background: #dd000d;
			text-align: center;
			line-height: 28rpx;
			margin: 0 5rpx;
		}
	}
	.coupon {
		width: 716rpx;
		height: 120rpx;
		z-index: 2;
		@include flexBox(space-between, center);
		position: relative;
		.coupon-inout {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			width: 100%;
			height: 100%;
		}
		.coupon-swiper {
			z-index: 20;
			margin-left: 110rpx;
			margin-bottom: 15rpx;
			.swiper {
				width: 450rpx;
				height: 70rpx;
				overflow: hidden;
				.swiper-item {
					line-height: 70rpx;
					text-align: left;
					color: #8b8b8b;
					font-size: 26rpx;
					@include ellipsis(1);
				}
			}
		}
		.coupon-btn {
			color: #b96f25;
			font-size: 28rpx;
			z-index: 20;
			position: absolute;
			top: 30rpx;
			right: 40rpx;
		}
	}
	.course {
		width: 100%;
		z-index: 2;
		@include flexBox(space-around, center);
		margin-bottom: 20rpx;

		.left {
			padding: 0 20rpx;
			font-size: 24rpx;
			color: $color-white;
			@include flexBox(space-around, center);
			flex: 1;
			.left-item {
				@include flexBox(null, center);
				.num {
					width: 26rpx;
					height: 26rpx;
					text-align: center;
					line-height: 26rpx;
					font-size: 20rpx;
					color: #fe6a6b;
					background: #ffffff;
					border-radius: 18rpx 0rpx 18rpx 18rpx;
					margin: 0 5rpx;
				}
				.iconfont {
					transform: rotate(96deg);
					display: block;
				}
			}
		}
		.course-btn {
			width: 100rpx;
			height: 36rpx;
			background: #ffffff;
			color: #fe6a6b;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			border-radius: 8rpx;
			margin-right: 20rpx;
			.course-btn__tips {
				width: 32rpx;
				height: 30rpx;
			}
		}
	}
}
</style>
